<template>
  <div class="strut-div">
    <div id="common-pie" class="strut-div" style="width:280px;float: left;"></div>
    <div class="strut-div" style="width: 220px;float: left;margin-top: 4px;text-align: left;">
      <ul>
        <li v-for="(item, index) in config.option.data" :key="index">{{item.name}}<span>{{item.value}}</span><i>{{config.option.unit}}</i></li>
 <!--       <li>办结案件<span>76</span><i>件</i></li>
        <li>预警案件<span>20</span><i>件</i></li>
        <li>超期案件<span>4</span><i>件</i></li>
        <li>已发问讯<span>3</span><i>件</i></li> -->
      </ul>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';
	import autoHover from '../../util/autoHover.js';
  export default {
    name: "CommonPieChart",
    props: ['config'],
    data() {
      return {
        chart: null,
				timeTicket:null,
      }
    },
    methods: {
      initChart() {
        let option = {
          // backgroundColor: '#fff',
          color: ['#1E558E', '#0D699A', '#0E759D', '#10919F', '#0F9683'],
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c}"
          },
          // legend: {

          // top: '15%',
          // orient: 'vertical',
          // padding: [
          //   3,  // 上
          //   5, // 右
          //   5,  // 下
          //   15, // 左
          // ],
          // textStyle: {color: '#fff', fontSize: '12'},
          // formatter: function (params, ticket, callback) {
          //   console.log(params.data)
          //   return params + "  " + params.data + "  件";
          // }
          // },
          // toolbox: {
          //   show: false,
          //   feature: {
          //     mark: {show: false},
          //   }
          // },
          series: [
            {
              name: '',
              type: 'pie',
              radius: [8, '65%'],
              center: ['50%', '55%'],
              roseType: 'radius',
              width: '55%',       // for funnel
              max: 20,
              borderColor: '#fff',//1、背景色和饼图块色一致，则能解决块之间间距问题
              borderWidth: 20,
              opacity: 1,// for funnel
							label: {
							  show: true,
								fontSize: 11
							},
							labelLine: {
							  show: true
							},
              // itemStyle: {
              //   normal: {
              //     
              //   },
              //   emphasis: {
              //     label: {
              //       show: true
              //     },
              //     labelLine: {
              //       show: true
              //     }
              //   }
              // },
              data: []
            }
          ]
        };
        console.log(this.chart);
        setTimeout(() => {
          // option.series.data.value = ['335', '310', '274', '235', '400'];
          // option.series.data.name = ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'];
          option.series[0].data = this.config.option.data;
					
					
					// [
					//   {value: 100, name: '已发问讯'},
					//   {value: 150, name: '超期件数'},
					//   {value: 274, name: '预警件数'},
					//   {value: 300, name: '办结办件'},
					//   {value: 340, name: '新增办件'}
					// ],
            this.chart.setOption(option);
						this.timeTicket = autoHover.autoHover(this.chart,option,option.series[0].data.length);
						
        }, 300);

      },
      refreshChart() {

      },
    },
    mounted() {

      this.chart = echarts.init(document.getElementById('common-pie'));
    },
		beforeDestroy() {
			autoHover.stopHover(this.timeTicket);
		}

  }
</script>

<style scoped lang="scss" type="text/scss">

  $gov-pie-list: url("../../assets/imgs/list-one.jpg");
  ul {
    padding: 0;
  }

  ul li {
    margin: 1px 0 0 0px;
    padding: 0 0px 0 15px;
    font-size: 14px;
    list-style-type: none;
    background: $gov-pie-list no-repeat 0px 8px;
    background-size: 10px 10px;
		 white-space:nowrap;
    span {
      padding: 0 5px 0 5px;
      color: #FBCC13;
      font-size: 20px;
      line-height: 20px;
      display: inline-block;
      // width: 25px;
    }

    i {
      font-style: normal;
      font-size: 14px;
      vertical-align: bottom;
    }
  }
</style>
